<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'

const user = useUserStore()
const router = useRouter()
const route = useRoute()
const loading = ref(false)
const form = ref({ account: '', password: '' })

async function onLogin() {
  if (!form.value.account || !form.value.password) return
  loading.value = true
  try {
    const res = await user.login({ account: form.value.account, password: form.value.password })
    if (res?.code === 200) {
      router.replace('/')
    }
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="login-page">
    <div class="login-wrap container">
      <div class="brand">E‑Shop</div>
      <div class="card login-card">
        <h2>账号登录</h2>
        <p class="sub">欢迎回来，请使用账号和密码登录</p>
        <div class="fields">
          <div class="field"><input v-model="form.account" placeholder="用户名/邮箱/手机号" /></div>
          <div class="field"><input v-model="form.password" placeholder="密码" type="password" /></div>
        </div>
        <button class="btn btn-primary btn-full" :disabled="loading" @click="onLogin">{{ loading ? '登录中...' : '登录' }}</button>
      </div>
      <div class="foot">© 2025 E‑Shop</div>
    </div>
  </div>
</template>

<style scoped>
.login-page { min-height: 100vh; display: grid; align-items: center; background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%); }
.login-wrap { display: grid; justify-items: center; gap: 16px; }
.brand { font-size: 28px; font-weight: 800; letter-spacing: .5px; color: var(--primary); }
.login-card { width: 100%; max-width: 420px; padding: 24px; }
.login-card h2 { margin: 0 0 8px 0; }
.sub { margin: 0 0 16px 0; color: var(--muted); font-size: 13px; }
.fields { display: grid; gap: 12px; margin-bottom: 12px; }
.btn-full { width: 100%; }
.foot { color: #999; font-size: 12px; }
</style>


